<template>
  <div>
    <el-dialog
      v-model="open"
      v-loading="loading"
      :before-close="close2"
      title="修改"
    >
      <div>
        <span class="title">运单信息</span>
        <el-form
          ref="tab1"
          v-loading="loading"
          :model="queryParams"
          inline
        >
          <el-form-item label="客户单号">
            <el-input
              v-model="queryParams.waybillNoList"
              type="textarea"
              :autosize="{ maxRows: 2, minRows: 2 }"
              size="small"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getdata">搜索</el-button>
          </el-form-item>
          <div class="btnss" style="padding: 3px 0;">
            <el-button type="primary" @click="addEdit">新增</el-button>
            <el-button
              type="danger"
              :disabled="mu2"
              @click="delEdit"
            >
              删除
            </el-button>
            <el-button
              type="warning"
              @click="exportEdit"
            >
              导出箱号
            </el-button>
          </div>
          <el-table
            border
            height="200px"
            :data="tableList1"
            show-summary
            @selection-change="change1"
          >
            <el-table-column
              type="selection"
              align="center"
              width="45"
              fixef="left"
            ></el-table-column>
            <el-table-column
              label="客户单号"
              align="center"
              prop="waybillNo"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="销售产品"
              align="center"
              prop="marketProducts"
              min-width="100"
            ></el-table-column>
       
            <el-table-column
              label="客户名称"
            
              align="center"
              prop="customerCode"
              min-width="100"
            ></el-table-column>
            <el-table-column
              label="收货总件数"
              align="center"
              prop="receivingTotal"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="收货总实重"
              align="center"
              prop="receivingTotalWeight"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="收货总材积（方）"
              align="center"
              prop="receivingTotalWood"
              min-width="150"
            ></el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="init1"
          />
        </el-form>
      </div>
      <div>
        <span class="title">货箱信息</span>
        <el-form
          ref="tab2"
          v-loading="loading"
          :model="query"
          inline
        >
          <el-form-item label="箱号">
            <el-input
              v-model="query.caseNumbers"
              type="textarea"
              :autosize="{ maxRows: 2, minRows: 2 }"
              size="small"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getdata2">搜索</el-button>
          </el-form-item>
          <div class="btnss" style="padding: 3px 0;">
            <el-button type="primary" @click="addEdit2">新增</el-button>
            <el-button
              type="danger"
              :disabled="mu3"
              @click="delEdit2"
            >
              删除
            </el-button>
          </div>
          <el-table
            border
            height="400px"
            :data="tableList2"
            show-summary
            @selection-change="change2"
          >
            <el-table-column
              type="selection"
              align="center"
              width="45"
              fixef="left"
            ></el-table-column>
            <el-table-column
              label="箱号"
              align="center"
              prop="caseNumber"
            ></el-table-column>
            <el-table-column
              label="长(cm)"
              align="center"
              prop="length"
            ></el-table-column>
            <el-table-column
              label="宽(cm)"
              align="center"
              prop="width"
            ></el-table-column>
            <el-table-column
              label="高(cm)"
              align="center"
              prop="height"
            ></el-table-column>
            <el-table-column
              label="重(kg)"
              align="center"
              prop="weight"
            ></el-table-column>
            <el-table-column
              label="材积重(kg)"
              align="center"
              prop="vweight"
            ></el-table-column>
          </el-table>
          <pagination
            v-show="total2 > 0"
            v-model:page="query.pageNum"
            v-model:limit="query.pageSize"
            :total="total2"
            @pagination="init2"
          />
        </el-form>
      </div>
    </el-dialog>
    <el-dialog v-model="open2" :before-close="close1" :title="title">
      <div>
        <el-form
          v-if="title=='新增运单'"
          ref="table3"
          :model="queryParams1"
          inline
        >
          <el-form-item label="客户单号">
            <el-input
              v-model="params1.waybillNo"
              type="textarea"
              :autosize="{ maxRows: 2, minRows: 2 }"
              size="small"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getdata3">搜索</el-button>
          </el-form-item>
          <div class="btnss" style="padding: 3px 0;">
            <el-button
               
              type="primary"
              :disabled="mu1"
              @click="add1"
            >
              添加
            </el-button>
          </div>
          <el-table
            ref="table1"
            border
            height="400px"
            :data="tableList3"
            @selection-change="select2"
          >
            <el-table-column
              type="selection"
              align="center"
              width="45"
              fixef="left"
            ></el-table-column>
            <el-table-column
              label="客户单号"
              align="center"
              prop="waybillNo"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="销售产品"
              
              align="center"
              prop="marketProducts"
              min-width="100"
            ></el-table-column>
       
            <el-table-column
              label="客户名称"
            
              align="center"
              prop="customerCode"
              min-width="100"
            ></el-table-column>
            <el-table-column
              label="收货总件数"
              align="center"
              prop="receivingTotal"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="收货总实重"
              align="center"
              prop="receivingTotalWeight"
              min-width="150"
            ></el-table-column>
            <el-table-column
              label="收货总材积（方）"
              align="center"
              prop="receivingTotalWood"
              min-width="150"
            ></el-table-column>
          </el-table>
        </el-form>
        <el-form v-if="title=='新增货箱'" :model="query1" inline>
          <el-form-item label="箱号">
            <el-input
              v-model="query1.caseNumber"
              type="textarea"
              :autosize="{ maxRows: 2, minRows: 2 }"
              size="small"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getdata4">搜索</el-button>
          </el-form-item>
          <div class="btnss" style="padding: 3px 0;">
            <el-button
               
              :disabled="mu4"
              type="primary"
              @click="addEdit4"
            >
              添加
            </el-button>
          </div>
          <el-table
            ref="table2"
            border
            height="200px"
            :data="tableList4"
            @selection-change="change3"
          >
            <el-table-column
              type="selection"
              align="center"
              width="45"
              fixef="left"
            ></el-table-column>
            <el-table-column
              label="箱号"
              align="center"
              prop="caseNumber"
            ></el-table-column>
            <el-table-column
              label="长(cm)"
              align="center"
              prop="length"
            ></el-table-column>
       
            <el-table-column
              label="宽(cm)"
              align="center"
              prop="width"
            ></el-table-column>
            <el-table-column
              label="高(cm)"
              align="center"
              prop="height"
            ></el-table-column>
            <el-table-column
              label="重(kg)"
              align="center"
              prop="weight"
            ></el-table-column>
            <el-table-column
              label="材积重(kg)"
              align="center"
              prop="vweight"
            ></el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, defineExpose, defineEmits } from 'vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { replaceParams } from '@/utils/index'
// eslint-disable-next-line max-len
import { queryLoadingPackageDetails, queryMergeLoadingOrderInfo, selectMergeLoadingOrderNoInfo, selectMergeLoadingOrderPackage, addCatbinOrderNo, removeCatbinOrderPackage, removeCatbinOrderNo, selectOrderPackage2, addCatbinOrderPackage } from '@/api/expressManager/yuOrder'

const emit = defineEmits(['refush'])
const idss = ref(null)
const transportTypes = ref(null)
const cab = ref(null)
const open = ref(false)
const open2 = ref(false)
const title = ref(null)
const total = ref(null)
const total2 = ref(null)
const table1 = ref(undefined)
const table2 = ref(undefined)
const loading = ref(false),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const queryParams = ref({
  waybillNoList: '',
  pageNum: 1,
  pageSize: 10,
  id: '',
  cabinetNo: '',
  transportType: '',
})

const query = ref({
  caseNumbers: [],
  pageNum: 1,
  pageSize: 10,
  id: '',
  cabinetNo: '',
  transportType: '',
  waybillNo: '',
})
const queryParams1 = ref({
  waybillNo: undefined,
  pageNum: 1,
  pageSize: 10,
})
const query1 = ref({
  caseNumber: '',
  pageNum: 1,
  pageSize: 10,
})
const params1 = ref({
  waybillNo: '',
})
const tableList1 = ref([])
const tableList2 = ref([])
const tableList3 = ref([])
const tableList4 = ref([])
const { proxy } = getCurrentInstance() as any
const getdata = () => {
  init1()
}
const getdata2 = () => {
  init2()
}
const getdata3 = () => {
  const data = {
    waybillNo: params1.value.waybillNo,
    transportType: queryParams.value.transportType,
  }
  selectMergeLoadingOrderNoInfo(data).then(res => {
    tableList3.value = res.data
  })
}
const addEdit = () => {
  open2.value = true    
  title.value = '新增运单'
}
const table3 = ref(undefined)
const tab1 = ref(undefined)
const tab2 = ref(undefined)
const close1 = () => {
  open2.value = false
  proxy.$refs.table3.resetFields()
}
const close2 = () => {
  open.value = false
  query.value.caseNumbers = []
  queryParams.value.waybillNoList = []
  proxy.$refs.tab1.resetFields()
  proxy.$refs.tab2.resetFields()
}
const add1 = () => {
  const orderNolists = JSON.parse(JSON.stringify(orderNos.value))
  const data = {
    orderNoList: orderNolists,
    id: idss.value.toString(),
  }
  console.log(data)
  addCatbinOrderNo(data).then(res => {
    if (res.code == 200) {
      ElMessage.success('新增成功')
      open2.value = false
      initdata()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const refush = () => {
  emit('refush')
}
const delEdit = () => {
  const orderNolists = JSON.parse(JSON.stringify(orderNoss.value))
  const data = {
    orderNoList: orderNolists,
    id: idss.value.toString(),
  }
  ElMessageBox.confirm('确认删除该运单信息？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    removeCatbinOrderNo(data).then(res => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        initdata()
        refush()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
const exportEdit = () => {
  const data = {
    id: queryParams.value.id,
    transportType: queryParams.value.transportType,
    cabinetNo: queryParams.value.cabinetNo,
  }
  $download('order/cabinet/exportBoxNumber', data, `运单信息${ new Date().getTime() }.xlsx`)
}
const addEdit2 = () => {
  open2.value = true     
  title.value = '新增货箱'
}
const mu3 = ref(true)
const caseNumberss = ref(null)
const change2 = (rows: { [key: string]: any }[]) => {
  mu3.value = !rows.length
  caseNumberss.value = rows.map(el => el.caseNumber)
}
const delEdit2 = () => {
  const caseNumber = JSON.parse(JSON.stringify(caseNumberss.value))
  const data = {
    caseNumbers: caseNumber,
    cabinetNoId: idss.value.toString(),
    cabinetNo: cab.value.toString(),
  }
  ElMessageBox.confirm('确认删除该货箱信息？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    removeCatbinOrderPackage(data).then(res => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        initdata()
        refush()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
const mu1 = ref(true)
const orderNos = ref([])
const select2 = (rows: { [key: string]: any }[]) => {
  orderNos.value = rows.map(el => el.orderNo)
  mu1.value = !rows.length
}

const waybillNos = ref(null)
const orderNoss = ref(null)
const mu2 = ref(true)
const change1 = (rows: { [key: string]: any }[]) => {
  waybillNos.value = rows.map(el => el.waybillNo)
  orderNoss.value = rows.map(el => el.orderNo)
  mu2.value = !rows.length
  // getInit()
}
const getInit = () => {
  query.value.waybillNo = waybillNos.value.split(',')
  init2()
}
const getdata4 = () => {
  const data = {
    orderNoList: replaceParams(query1.value.caseNumber).toString(),
    transportType: queryParams.value.transportType,
  }
  selectMergeLoadingOrderPackage(data).then(res => {
    if (res.code == 200) {
      tableList4.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const mu4 = ref(true)
const caseNumbers4 = ref([])
const change3 = (rows: { [key: string]: any }[]) => {
  caseNumbers4.value = rows.map(el => el.caseNumber)
  
  mu4.value = !rows.length
}
const addEdit4 = () => {
  const caseNumber = JSON.parse(JSON.stringify(caseNumbers4.value))
  const data = {
    cabinetNoId: idss.value.toString(),
    cabinetNo: cab.value.toString(),
    caseNumbers: caseNumber,
  }
  addCatbinOrderPackage(data).then(res => {
    if (res.code == 200) {
      ElMessage.success('新增成功')
      open2.value = false
      initdata()
    } else {
      ElMessage.success(res.msg)
    }
  })
}
const initdata = () => {
  loading.value = true
  queryParams.value.id = JSON.parse(idss.value)
  queryParams.value.transportType = JSON.parse(transportTypes.value)
  queryParams.value.cabinetNo = JSON.parse(JSON.stringify(cab.value))[0]
  query.value.id = JSON.parse(idss.value)
  query.value.transportType = JSON.parse(transportTypes.value)
  query.value.cabinetNo = JSON.parse(JSON.stringify(cab.value))[0]
  const data = queryParams.value
  const data1 = query.value
  // 运单

  queryMergeLoadingOrderInfo(data).then(res => {
    if (res.code == 200) {
      proxy.tableList1 = res.data
      total.value = res.total
      loading.value = false
    }
  }).catch(() => {
    loading.value = false
  })
  // 包裹
  queryLoadingPackageDetails(data1).then(res => {
    if (res.code == 200) {
      proxy.tableList2 = res.data
      total2.value = res.total
      loading.value = false
    }
  }).catch(() => {
    loading.value = false
  })
}
const init1 = () => {
  queryParams.value.waybillNoList = replaceParams(queryParams.value.waybillNoList)
  const data = queryParams.value
  // 运单
  queryMergeLoadingOrderInfo(data).then(res => {
    if (res.code == 200) {
      proxy.tableList1 = res.data
      total.value = res.total
    }
  })
}
const init2 = () => {
  query.value.caseNumbers = replaceParams(query.value.caseNumbers).split(',')
  const data1 = query.value
  // 包裹
  queryLoadingPackageDetails(data1).then(res => {
    if (res.code == 200) {
      proxy.tableList2 = res.data
      total2.value = res.total
    }
  })
}
defineExpose({
  open,
  initdata,
  idss,
  transportTypes,
  cab,
  loading,
})
</script>
<style lang="less" scoped>
.btnss {
  float: right;
}
.title {
  font-weight: 700;
}
</style>